<#import "/includes/layout.html" as defaultLayout>
	<@defaultLayout.layout>
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header layuiadmin-card-header-auto">
					<form id="searchForm" class="layui-form" lay-filter="searchForm">
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline">
									<input class="layui-input" name="title" autocomplete="off" placeholder="输入关键字" />
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn" lay-submit lay-filter="searchForm"><i
										class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询</button>
								<button type="button" class="layui-btn layuiadmin-btn-list layui-btn-primary"
									data-type="clean">
									<i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i>重置</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-card-body">
					<div id="main" class="main"></div>
				</div>
			</div>
		</div>
		<style type="text/css">
			.main {
				height: 400px;
				/*width: 778px !important;*/
				overflow: hidden;
				padding: 10px;
				margin-bottom: 10px;
				border: 1px solid #e3e3e3;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
				-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
			}
		</style>
		<script src="${_context}/static/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main')); //  初始化
			layui.extend({
				index: 'lib/index' //主入口模块
			}).use(['index', 'select', 'form', 'dialoger'], function () {
				var $ = layui.jquery,
					form = layui.form,
					dialoger = layui.dialoger,
					select = layui.select;
				$.getJSON('${_context}/api/sys/chart/data?id=${vo.id}', function (res) {
					if (res.error == '0') {
						readerChart(res.data);
					} else {
						dialoger.alertError(res.message);
					}
				});
			});

			function readerChart(option) {
				var defaults = {
					title: { text: '一般柱状图' },
					tooltip: {
						trigger: 'axis'
					},
					toolbox: {
						show: true,
						feature: {
							saveAsImage: { show: true }
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								formatter: '{value} '
							}
						}
					],
					series: [{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'bar'
					}
					]
				};
				defaults.title.text = option.title;
				defaults.xAxis[0].data = option.data;
				defaults.yAxis[0].axisLabel.formatter += option.yformatter;
				defaults.series = option.series;
				for (var i = 0; i < defaults.series.length; i++) {
					defaults.series[i].barWidth = '60%';
				}
				myChart.setOption(defaults);
			}


		</script>
	</@defaultLayout.layout>